<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>
<body>
    <section class="aui-content-padded">
        <div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
        <div class="aui-btn aui-btn-primary" aui-popup-for="top">顶部中间</div>
        <div class="aui-btn aui-btn-primary" aui-popup-for="top-right">右上角</div>
    </section>
    <section class="aui-content-padded">
        <div class="aui-btn aui-btn-info" aui-popup-for="bottom-left">左下角</div>
        <div class="aui-btn aui-btn-info" aui-popup-for="bottom">底部中间</div>
        <div class="aui-btn aui-btn-info" aui-popup-for="bottom-right">右下角</div>
    </section>

    <div class="aui-popup aui-popup-top-left" id="top-left">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-popup aui-popup-top" id="top">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-popup aui-popup-top-right" id="top-right">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-popup aui-popup-bottom" id="bottom">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-popup aui-popup-bottom-left" id="bottom-left">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="aui-popup aui-popup-bottom-right" id="bottom-right">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
    function showPopup(){
        popup.show(document.getElementById("top-right"))
    }
</script>
</html>